<template>
  <div class="case-list">
    <mu-appbar :z-depth="0" style="width: 100%;top:0" color="white" text-color="primary">
      <mu-text-field v-model="title" color="primary" full-width solo
                     placeholder="请输入您要搜索的内容..."></mu-text-field>
      <mu-button icon slot="right" @click="refresh">
        <mu-icon value="search"></mu-icon>
      </mu-button>
    </mu-appbar>
    <mu-divider></mu-divider>
    <mu-paper :z-depth="0" class="load-more-wrap">
      <mu-container ref="container" class="load-more-content">
        <mu-load-more @refresh="refresh()" :refreshing="refreshing" :loading="loading" @load="load()">
          <mu-list :nested-indent="false" textline="three-line">
            <mu-paper round v-for="(item, index) in caseList" v-bind:key="item.id"
                      :z-depth="0">
              <mu-list-item style="margin-bottom: 2rem;margin-top: 2rem" :key="item.id"
                            :to="{name:'caseInfo',query: {id:item.id}}">
                <mu-list-item-action>
                  <mu-avatar color="white" size="44">
                    <img v-if="item.iconUrl" :src="item.iconUrl">
                    <mu-icon color="primary" size="36" v-else value="chrome_reader_mode"></mu-icon>
                  </mu-avatar>
                </mu-list-item-action>
                <mu-list-item-content>
                  <mu-list-item-title>{{item.companyName}}</mu-list-item-title>
                  <mu-list-item-sub-title>
                    标题：{{item.title}}
                  </mu-list-item-sub-title>
                  <mu-list-item-sub-title>
                    <mu-list-item-after-text>
                      发布时间：{{util.formatyyyyMMddDate(item.time)}}
                    </mu-list-item-after-text>
                  </mu-list-item-sub-title>
                  <mu-list-item-sub-title>
                    <mu-list-item-after-text>
                      <mu-badge :content="item.type" color="orange"></mu-badge>
                    </mu-list-item-after-text>
                    <mu-list-item-after-text>
                      <mu-badge :content="item.statusStr" color="green"></mu-badge>
                    </mu-list-item-after-text>
                    <mu-list-item-after-text>
                      <mu-badge v-show="item.isHot === 1" content="热门" color="red">
                      </mu-badge>
                    </mu-list-item-after-text>
                  </mu-list-item-sub-title>
                </mu-list-item-content>
              </mu-list-item>
              <mu-divider inset/>
            </mu-paper>
          </mu-list>
        </mu-load-more>
      </mu-container>
    </mu-paper>
  </div>
</template>
<script>
  import util from '@/common/util.js';
  import caseImg from '@/assets/images/case.png'

  export default {
    name: 'case-list',
    data() {
      return {
        title: '',
        caseList: [],
        num: 10,
        refreshing: false,
        loading: false,
        search: '',
        warning: '向上滑动查看更多'
      }
    },
    methods: {
      refresh() {
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        setTimeout(() => {
          this.refreshing = false;
          this.num = 10;
          this.listData();
        }, 1000)
      },
      load() {
        this.loading = true;
        setTimeout(() => {
          this.num += 10;
          this.listData();
          this.loading = false;
        }, 1000)
      },
      listData() {
        const _self = this;
        let listPO = {
          size: this.num,
          current: 1,
          params: [{
            field: "fh_case.title",
            operator: "like",
            value: this.title
          }]
        };
        this.postRequest("/case/list", listPO).then(res => {
          if (res.code === 200) {
            if (res.data) {
              _self.caseList = res.data.records;
              if (_self.caseList) {
                _self.caseList.forEach(function (i, index) {
                  i.declareLimitStr = util.formatyyyyMMddDate(i.declareLimit);
                  i.timeStr = util.formatyyyyMMddDate(i.time);
                  i.limitStr = i.timeStr + "-" + (i.declareLimitStr ? i.declareLimitStr : "不限");
                  i.image = i.img ? i.img : caseImg;
                  if (index % 5 === 0) {
                    i.featured = true;
                  } else {
                    i.featured = false;
                  }
                  let statusStr = "";
                  switch (i.status) {
                    case 1:
                      statusStr = "申报中";
                      break;
                    case 2:
                      statusStr = "受理中";
                      break;
                    case 3:
                      statusStr = "调解中";
                      break;
                    case 4:
                      statusStr = "诉讼中";
                      break;
                    case 5:
                      statusStr = "执行中";
                      break;
                    case 6:
                      statusStr = "已结束";
                      break;
                    default:
                      break;
                  }
                  i.statusStr = statusStr;
                });
              }
            }
          }
        });
      },
      openPage(id) {
        this.$router.push({name: 'caseInfo', query: {id: id}});
      }
    },
    mounted: function () {
      this.listData();
    },
    components: {}
  }
</script>

<style scoped lang="less">

  .case-list {
    position: fixed;
    top: 0;
    width: 100%;
    overflow: hidden;
    height: 100%;
    /*background-color: #ffffff;*/
  }

  .title {
    margin-left: -1rem;
    width: 100%;
    text-align: center;
    font-size: 17px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; /*超出部分用...代替*/
  }

  .load-more-wrap {
    width: 100%;
    height: 85%;
    display: flex;
    overflow: scroll;
    /*flex-direction: column;*/
    .mu-appbar {
      width: 100%;
    }
  }

  .load-more-content {
    flex: 1;
    overflow: auto;
    padding: 1rem;
    margin-top: -1.5rem;
  }

  .grid-list {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
</style>
